<template>
  <div class="body">
  <div class="login">
    <h1>用户登录</h1>
    <mt-field class="input-login" label='用户名:' placeholder='请输入用户名' v-model='uname'></mt-field>
    <!-- <span v-if="isLogin==false">请输入字母开头的3-12位</span> -->
    <mt-field class="input-login" label='密码:' placeholder='请输入密码' type='password' v-model='upwd'></mt-field>
    <!-- <span v-if="isLogin==false">请输入字母开头的3-12位</span> -->
    <mt-button size='large' @click.native='login'>登录</mt-button>
    <mt-button size='large' @click.native='reg'>注册</mt-button>
  </div></div>
</template>

<script>
  export default {
    data() {
      return {
        uname: 'admin',  //两个账号  还有一个是 8888,8888
        upwd: '8888',
        isLogin: true
      }
    },
    methods: {
      // 向父组件传值
      send() {
        this.$emit('child-even', this.isLogin)
      },
      login() {
        let u = this.uname
        let p = this.upwd
        //正则验证
        let reg = /^[a-zA-Z0-9]{3,12}$/
        if (!reg.test(this.uname)) {
          this.$toast('用户名格式错误')
          return
        }
        if (!reg.test(this.upwd)) {
          this.$toast('密码格式错误')
          return
        }
        // 发送axios
        let obj = {
          uname: u,
          upwd: p
        }
        this.axios.get('login', {
          params: obj
        }).then((res) => {
          // console.log(res)
          // 得到返回的参数
          if (res.data.code == 1) {
            this.isLogin = false
            this.send()
            console.log(res.data)
            //通过传递code值来让index的子组件header有判断的条件
            // this.$router.push({path:'/index',query:{uid:res.data.uid}})
            //使用vuex 使得uid变成全局属性
            this.$store.commit('login',{uid:res.data.uid,userImg:res.data.userImg,uname:res.data.name})
            console.log()
            this.$router.push({path:'/index'})
          } else {
             this.$message.error('用户名密码有误');
          }
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .body{
    width: 100%;
    height: 30rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10rem;
  }
  .login {
    width: 20rem;
    height: 30rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    /* border: solid black 0.1rem; */
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }

  span {
    height: 2rem;
    font-size: x-small;
  }
  .input-login{
    border: #000000 solid 0.0625rem;
    border-radius: 0.625rem;
  }
</style>
